<template>
  <div>
    <el-drawer
      title="详情"
      :visible.sync="dialogVisible"
      :direction="direction"
      :before-close="handleClose"
      size="40%"
    >
      <div style="padding: 0 20px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="操作详情" name="first">
            <div
              style="width: 100%; padding: 10px"
              v-if="activeName == 'first'"
            >
              <el-table :data="tableData.list" border>
                <el-table-column
                  prop="operId"
                  label="日志编号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="title"
                  label="系统模块"
                  align="center"
                ></el-table-column>
                <el-table-column label="操作类型" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.businessType }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operName"
                  label="操作人员"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="operIp"
                  label="主机"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="operLocation"
                  label="操作地点"
                  align="center"
                ></el-table-column>
                <el-table-column label="操作状态" align="center">
                  <template slot-scope="scope">
                    <el-tag
                      size="small"
                      :type="scope.row.status == 0 ? 'success' : 'danger'"
                      disable-transitions
                      >{{ scope.row.status == "0" ? "成功" : "失败" }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operTime"
                  label="操作时间"
                  align="center"
                ></el-table-column>
                <el-table-column label="消耗时间" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.costTime }} 毫秒
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="handleDetail(scope.row)"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="爬虫详情" name="second">
            <taxdatil
              v-if="activeName == 'second'"
              :detailInfo="detailInfo"
            ></taxdatil>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <handle-log ref="handleLog"></handle-log>
  </div>
</template>
<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import handleLog from "./handleLog.vue";
import taxdatil from "./taxdatil.vue";

import { getAllRegionList } from "@/api/system/errlog";
import { detailInfo } from "../../../customer/options";
export default {
  name: "failDetail",
  components: {
    dialogDiy,
    handleLog,
    taxdatil
  },
  data() {
    return {
      dialogVisible: false,
      direction: "rtl",
      tableData: {
        list: []
      },
      activeName: "first",
      detailInfo: {}
    };
  },
  methods: {
    handleDetail(v) {
      this.$refs.handleLog.openLog(v);
    },

    openlog(v) {
      this.getAllRegionList({ queryId: v.taskId });
      this.detailInfo = v;
      this.dialogVisible = true;
    },
    handleClose() {
      this.activeName = "first";
      this.detailInfo = {};
      this.tableData.list = [];
      this.dialogVisible = false;
    },
    getAllRegionList(params) {
      getAllRegionList(params).then(res => {
        this.tableData.list = res.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-drawer__header {
  margin-bottom: 0;
}
</style>
